<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<!--
        	流式布局、
        	利用了浮动的特点：在同一行若还有空位则会在同一行显示，位置不足的话就会紧跟在下一行排列
        	也就是说，在小型设备（小屏幕手机：iphone4、iphone5、ip6）和中型设备（ip6 plus 或者是平板设备）有很好的适应性
        -->
		<title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			
			.fl{
				float: left;
			}
			.div {
				width: 100%;
				height: 100px;
				background: deepskyblue;
			}
			
			.div1 {
				width: 10%;
				height: 100px;
				background: orange;
			}
			
			.div2 {
				width:20%;
				height: 100px;
				background: deeppink;
			}
			.div3 {
				width:50%;
				height: 100px;
				background: lightgreen;
			}
		</style>
	</head>

	<body>
		<!--<div class="div clearfix">-->
			<div class="div1 fl">
				
			</div>
			<div class="div2 fl">
				
			</div>
			<div class="div3 fl">
				
			</div>
		<!--</div>-->
	</body>

</html>